<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>状态提升</title>
    <script src="lib/react/react.development.js"></script>
    <script src="lib/react/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Price extends React.Component {
        constructor(props) {
          super(props);
        }

        handleChange = (e) => {
          this.props.onChange(e.target.value);
        };

        render() {
          return (
            <fieldset>
              <legend>薪资{this.props.title}</legend>
              <input
                type="text"
                onChange={this.handleChange}
                value={this.props.value}
              />
              {this.props.icon}
            </fieldset>
          );
        }
      }

      class HelloWorld extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            value: "",
            type: "CNY",
          };
        }

        handleCNY = (value) => {
          this.setState({
            value,
            type: "CNY",
          });
        };

        handleUSD = (value) => {
          this.setState({
            value,
            type: "USD",
          });
        };

        reverse(type, value) {
          // 费率
          const C = 6.65;
          var outValue = 0;
          var inputValue = parseFloat(value);
          if (Number.isNaN(inputValue)) {
            return "";
          }
          // 转换成人民币
          if (type == "CNY") {
            outValue = value * C;
          } else {
            outValue = value / C;
          }
          // 四舍五入 保留2位
          var roundValue = Math.round(outValue * 100) / 100;
          // 格式化
          if (roundValue.toString().indexOf(".") == -1) {
            roundValue += ".00";
          } else {
            //小数部分
            var dotNumber = roundValue.toString().split(".")[1];
            dotNumber = dotNumber.length == 1 ? dotNumber + "0" : dotNumber;
            roundValue = roundValue.toString().split(".")[0] + "." + dotNumber;
          }
          return roundValue;
        }

        render() {
          var type = this.state.type;
          var value = this.state.value;
          let CNYvalue = type === "CNY" ? value : this.reverse("CNY", value);
          let USDvalue = type === "USD" ? value : this.reverse("USD", value);
          return (
            <div>
              <Price
                title="人民币"
                onChange={this.handleCNY}
                value={CNYvalue}
                icon="￥"
              />
              <Price
                title="美元"
                onChange={this.handleUSD}
                value={USDvalue}
                icon="$"
              />
              <p>{CNYvalue>= 8000? "您工资真高":"我还得努力"}</p>
            </div>
          );
        }
      }

      ReactDOM.render(<HelloWorld />, document.getElementById("root"));
    </script>
  </body>
</html>
